<template>
    <div class="integration w-100 h-100 d-flex align-items-c justify-content-se flex-direction-c">
        <div class="info w-100 h-30 text-left">
            <div class="chessPic w-100 d-flex align-items-c justify-content-c h-20">
                <img class="border-radius-10" src="@/assets/image/white.png" alt="白棋" v-show="chess === 1" />
                <img class="border-radius-10" src="@/assets/image/black.png" alt="黑棋" v-show="chess === 2" />
            </div>
            <div class="pic w-100">
                <img class="w-100 border-radius-10" :src="pic" alt="头像" />
            </div>
            <div class="name w-100 show-line-1">{{name}}</div>
            <div class="score w-100 show-line-1">
                <FontAwesomeIcon color="#ff9900" :icon="['fas', 'coins']" />
                <span class="m-left-5">{{score}}</span>
            </div>
        </div>
        <div class="action w-100 h-30 d-flex align-items-c justify-content-e flex-direction-c"  v-if="action">
            <div class="withdraw w-100 h-25 text-center">
                <el-button type="warning" size="large" :disabled="stepBackButton.disabled" :loading="stepBackButton.loading" @click="stepBack">{{stepBackButton.loading ? stepBackButton.loadingTitle : stepBackButton.title}}</el-button>
            </div>
            <div class="prayForPeace w-100 h-25 text-center">
                <el-button type="warning" size="large" :disabled="requestingGameTieButton.disabled" :loading="requestingGameTieButton.loading" @click="requestingGameTie">{{requestingGameTieButton.loading ? requestingGameTieButton.loadingTitle : requestingGameTieButton.title}}</el-button>
            </div>
            <div class="giveUp w-100 h-25 text-center">
                <el-button type="warning" size="large" :disabled="loserButton.disabled" @click="loser">{{loserButton.title}}</el-button>
            </div>
        </div>
        <div class="action w-100 h-30 d-flex align-items-c justify-content-e flex-direction-c" v-else>
            <div class="gameRecord w-100 h-25 text-center">
                <el-button type="warning" size="large" >游戏记录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import {defineComponent} from 'vue'
import userAvatar from '@/assets/image/user-avatar.jpg'
import {ElButton, ElMessageBox} from "element-plus";
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
export default defineComponent({
    props: {
        chess: {            //我的棋子颜色
            type: Number,
            default: 0,
        },
        pic: {              //我的头像
            type: String,
            default: userAvatar
        },
        name: {             //我的昵称
            type: String,
            default: '虚位以待'
        },
        score: {            //我的分数
            type: Number,
            default: 0
        },
        action: {
            type: Boolean,
        },
        isStart: {          //是否开始游戏
            type: Boolean,
            default: false
        },
        socket: {
            type: WebSocket,
        },
        round: {            //回合数
            type: Number,
            default: 0,
        },
    },
    components: {
        ElButton,
        FontAwesomeIcon
    },
    data() {
        return {
            stepBackButton: {
                title: '悔棋',
                loadingTitle: '等待同意',
                loading: false,
                disabled: true,
            },
            requestingGameTieButton: {
                title: '求和',
                loadingTitle: '等待同意',
                loading: false,
                disabled: true,
            },
            loserButton: {
                title: '认输',
                disabled: true,
            },
        }
    },
    methods: {
        /**
         * 发送请求悔棋
         */
        stepBack() {
            this.stepBackButton.loading = true;
            this.socket.send(JSON.stringify({
                mode: 'multifunctionalOperation',
                type: 'stepBack',
                room_id: this.$common.getSessionStorageValues('roomInfo.room_id'),
                uid: this.$common.getSessionStorageValues('userLoginInfo.id'),
            }))
        },

        /**
         * 发送请求平局
         */
        requestingGameTie(){
            this.requestingGameTieButton.loading = true;
            this.socket.send(JSON.stringify({
                mode: 'multifunctionalOperation',
                type: 'requestingGameTie',
                room_id: this.$common.getSessionStorageValues('roomInfo.room_id'),
                uid: this.$common.getSessionStorageValues('userLoginInfo.id'),
            }))
        },

        /**
         * 直接通知对方自己认输
         */
        loser() {
            ElMessageBox.confirm(
                '真的要认输吗？可以再看看棋盘，说不定有神之一手呢',
                '认输？',
                {
                    confirmButtonText: '认输',
                    cancelButtonText: '不认输',
                    type: 'warning',
                }
            )
                .then(() => {
                    this.socket.send(JSON.stringify({
                        mode: 'processingResults',
                        type: 'giveUp',
                        room_id: this.$common.getSessionStorageValues('roomInfo.room_id'),
                        uid: this.$common.getSessionStorageValues('userLoginInfo.id'),
                    }))
                })
                .catch(() => {

                })
        },
    }
})
</script>

<style scoped lang="scss">

</style>